<template>
    <div
        class="timeline-track"
        @click="handleClickTime(activeIndex)"
        :style="trackStyle"
    >
        <div
            v-if="timeline.showTime"
            style="position: relative"
            class="time-progress"
        >
            <span class="rc-track-time" :style="{ left: 0 }"></span>
            <span
                class="rc-track-time"
                :style="{ left: length - 1 + 'px' }"
            ></span>
        </div>
        <div @click.stop class="editTimeBox" v-if="isShowTimePop">
            <div class="title">修改时间</div>
            <el-time-picker
                v-model="timeArr"
                is-range
                format="HH:mm"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
            />
            <div class="pop-footer">
                <a-button
                    size="small"
                    type="default"
                    style="margin-right: 10px"
                    @click="handleClose"
                >
                    取消
                </a-button>
                <a-button size="small" type="primary" @click="confirm">
                    确认
                </a-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import moment from "moment";
import { cloneDeep } from "lodash";
import { ElMessage } from "element-plus";
import { timeToCoordinate } from "./util";
import EditTime from "./EditTime.vue";
const format = "HH:mm";
const props = defineProps({
    activeIndex: {
        type: Number,
        required: true,
    },
    dayIndex: {
        type: Number,
        required: true,
    },
    changeTrack: {
        type: Function,
        required: true,
    },
    timeline: {
        type: Object,
        required: true,
    },
    offset: {
        type: Number,
        required: true,
    },
    length: {
        type: Number,
        required: true,
    },
    timelines: {
        type: Array,
        required: true,
    },
    getDay: {
        type: Function,
        required: true,
    },
});
const startTime = ref(moment(props.timeline.startTime, format));
const endTime = ref(moment(props.timeline.endTime, format));
const timeArr = ref([
    moment(props.timeline.startTime, format),
    moment(props.timeline.endTime, format),
]);
const isShowTimePop = ref(false);

watch(
    () => props,
    () => {
        timeArr.value = [
            moment(props.timeline.startTime, format),
            moment(props.timeline.endTime, format),
        ];
        // console.log("watch Time", timeArr.value);
    },
    { deep: true }
);

const trackStyle = computed(() => {
    const style = {
        visibility: "visible",
        left: props.offset + "px",
        width: props.length + "px",
    };
    if (props.timeline.border) {
        style.height = "14px";
        style.border = "1px dotted rgb(34 103 0)";
    }
    return style;
});

const handleClickTime = (index) => {
    isShowTimePop.value = !isShowTimePop.value;
    // console.log("object", timeArr.value);
    props.changeTrack(index);
};
const handleClose = () => {
    isShowTimePop.value = false;
};

const confirm = () => {
    startTime.value = moment(timeArr.value[0], format);
    endTime.value = moment(timeArr.value[1], format);
    if (startTime.value > endTime.value) {
        return ElMessage.error("开始时间不能晚于结束时间");
    }

    if (
        props.activeIndex > 0 &&
        startTime.value <
            moment(props.timelines[props.activeIndex - 1].endTime, format)
    ) {
        return ElMessage.error("开始时间不能超过上一时间条的结束时间");
    }

    if (
        props.activeIndex < props.timelines.length - 1 &&
        endTime.value >
            moment(props.timelines[props.activeIndex + 1].startTime, format)
    ) {
        return ElMessage.error("结束时间不能大于下一时间条的开始时间");
    }

    let timeSliders = cloneDeep(props.timelines);
    const _startTime = moment(startTime.value).format(format);
    const _endTime = moment(endTime.value).format(format);

    const { offset, length, startHour, startMin, endHour, endMin } =
        timeToCoordinate(_startTime, _endTime);

    timeSliders[props.activeIndex] = {
        ...timeSliders[props.activeIndex],
        offset,
        length,
        startTime: _startTime,
        endTime: _endTime,
        startHour,
        startMin,
        endHour,
        endMin,
    };
    console.log("确认", timeSliders);
    props.getDay(timeSliders, props.dayIndex);
    isShowTimePop.value = false;
};
</script>

<style scoped>
/* Add styles for the track and other related classes if needed */
.timeline-track {
    position: absolute;
    left: 0;
    height: 14px;
    /* border-radius: 6px; */
    background-color: #66a3ff;
    /* z-index: 1; */
}
.timeline-track:hover {
    cursor: pointer;
}
:deep(.el-range-editor.el-input__wrapper) {
    width: 250px;
}
.time-progress {
    position: relative;
}
.editTimeBox {
    width: 280px;
    background: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}
.title {
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 16px;
    color: #303133;
    margin-bottom: 4px;
}
.pop-footer {
    margin-top: 10px;
    display: flex;
    justify-content: right;
}
</style>
